<template>
    <!--Header-->
    <header class="header">
        <div class="mat-tag">
            <img src="https://media-public.canva.cn/9H4_s/MAF0P59H4_s/1/t.png" alt="">
            <div class="card">
                <p @click="selectedByCate(2)">后端</p>
            </div>
            <div @click="selectedByCate(1)" class="card">
                <p>前端</p>
            </div>
            <div @click="selectedByCate(3)" class="card">
                <p>服务端</p>
            </div>
            <el-dropdown>
                <p style="line-height: 8vh;color:white;font-weight:bolder;width: 100px;text-align:center;">热门文章</p>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in hots" :key="index">{{ item.title }}
                            {{ item.count }}次观看</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
        <div class="avatar">
            <el-dropdown>
                <el-avatar :src="userInfo.image" />
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="router.push('/login')">登录</el-dropdown-item>
                        <el-dropdown-item @click="router.push('/user')">我的</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </header>
    <!--Content-->
    <div class="content">
        <p class="title">推荐合集</p>
        <p class="f_title">matrix-China是整合多个技术文档而构成的文档博客平台,是一个轻量级的多技术网络文档平台,满足您懒得翻技术文档的需求</p>
        <div class="grids">
            <el-card style="min-width: 30vw" @click="dialogPops(item, index)" v-for="(item, index) in list"
                :key="item.id">
                <template #header>
                    <div>
                        <p style="text-align: center;">{{ item.title }}</p>
                    </div>
                </template>
                <div class="grid" :style="{ backgroundColor: color[Math.floor(Math.random() * (color.length))] }">
                    <p style="text-align:center;color:white;font-size: 40px;">{{ item.title }}</p>
                </div>
                <template #footer>
                    <div style="display: flex;justify-content: space-between">
                        <p style="color: gray;">{{ item.createTime.split('T')[0] + " " + item.createTime.split('T')[1] }}</p>
                        <p style="color: gray;"><span style="color: aqua;">[{{ item.active }}]</span>{{ item.cateId }}</p>
                    </div>
                </template>
            </el-card>
            <!--弹窗逻辑-->
            <el-dialog draggable="true" v-model="dialogTableVisible" :title="from" width="800">
                <div v-html="marked(dialogContent)"></div>
            </el-dialog>
        </div>
    </div>
    <!--Footer-->
    <footer class="footer">
        <p>@开发者笔记-Matrix</p>
    </footer>

</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue';
import { index, findByCate, addCount, hotArticles } from '../../api/index.js';
import { marked } from 'marked';
import { useRouter } from 'vue-router';

const router = useRouter();

const from = ref('');

const hots = ref([]);//热门文章

const dialogTableVisible = ref(false);//弹窗状态

const dialogContent = ref('');//弹窗内容

const list = ref([]);// 首页数据

const userInfo=computed(()=>{
    return JSON.parse(localStorage.getItem('matrix-userInfo'));   
})

onMounted(() => {
    index().then(({ data }) => {//首页数据
        // console.log(data);

        list.value = data.data;
    })

    console.log(userInfo.value);
    

    hotArticles().then(({ data }) => {//热门评论
        hots.value = data.data;

        console.log(hots.value);

    })
})
const color = [
    '#ff8585', '#4fcbff', '#00ffba', '#ffa060'
]

const dialogPops = (item, index) => {//弹窗逻辑
    let id = item.id;

    addCount(item).then(({ data }) => {

        hotArticles().then(({ data }) => {//热门评论
            hots.value = data.data;

            console.log(hots.value);

        })

    })

    dialogTableVisible.value = true;

    from.value = '发布者:' + (item.userId);

    dialogContent.value = item.content;
}

const selectedByCate = (id) => {//根据分类查询
    findByCate({ id }).then(({ data }) => {
        list.value = data.data;
    })
}

</script>

<style scoped>
.header {
    background-color: #333333;
    height: 8vh;
    display: flex;
    justify-content: space-between;

    .mat-tag {
        height: 100%;
        line-height: 8vh;
        display: flex;

        .card {
            width: 10vw;
            height: 100%;
            text-align: center;

            p {
                color: white;
            }
        }

        .card:hover {
            background-color: #555555;
        }
    }

    .avatar {
        margin-top: 2vh;
        margin-right: 10vw;
    }
}

.content {
    margin-top: 5vh;

    .title {
        text-align: center;
        font-weight: bold;
    }

    .f_title {
        text-align: center;
        color: #555555;
    }

    .grids {
        margin-top: 5vh;
        display: flex;
        flex-wrap: wrap;

        .el-card {
            margin-left: 10vw;
            margin: 20px;

            .grid {
                height: 20vh;
                line-height: 20vh;

            }
        }
    }
}

.footer {
    margin-top: 2vw;
    background-color: #333333;
    height: 10vh;
    text-align: center;
    line-height: 10vh;
    color: white;
    margin-bottom: 0;
}
</style>